<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/echarts.min.js"></script>
    <script src="../static/china.js"></script>
</head>
<body>
<div id="main" style="width:1400px;height:400px"></div>
<script type="text/javascript">
    var dom = document.getElementById("main");
    var myChart = echarts.init(dom);

    var area = [{% for i in area %}'{{ i }}',{% endfor %}];
    var all = [{% for i in all %}{{ i }},{% endfor %}];

    var option =null;
    option = {
       title:{
          text:'各省疫情累计数量热力地图',
          textStyle:{
             fontWeight:'bold',
             fontStyle:'italic',
             color:'red'
           },
       },
       tooltip:{},
       visualMap:{
          show:true,
          y:'center',
          x:'left',
          // 定义在选中范围中的视觉元素
          //inRange: {
           // 图元的颜色
             // color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5']
         // }
       },
       series:[
         {
            name:'中国',
            type:'map',
            mapType:'china',
            label:{
               emphasis:{
                  show:true
               },
               normal:{
                  show:true
               }
            },
            data:(function () {
                    var res = []
                    for (var i = 0; i < 33; i++) {
                        res.push({value: all[i], name: area[i]});
                    }
                    return res;
                })(),
         }
       ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);




</script>

</body>
</html>